<template>
  <div class="header">
      <Row class="">
          <Col span="15">
            <img src="../assets/images/logo.jpg" alt="" >
          </Col>
          <Col span="8" class="login-status" v-show="show">
            欢迎您：{{doctorName}} 医生
            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
            <a href="javascript:;"  @click="logout">退出</a>
          </Col>
      </Row>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'app-header',
  computed: {
    ...mapState({
      show: state => state.header.show,
      doctorName: state => state.header.doctorName
    })
  },
  methods: {
    logout () {
      this.$store.commit('UPDATE_HEADERSHOW', false)
      localStorage.removeItem('accessToken')
      this.$router.replace('/login')
    }
  }
}
</script>

<style scoped lang="less">
.header {
  background: #5686EC;
  color:#fff;
}
.login-status {
  padding-top: 30px;
  text-align: right;
  a {
    color: #fff;
  }
}
</style>
